<template>
  <v-layout class="pagination-wrapper">
    <v-flex md10 d-flex justify-start align-center>
      <v-flex d-flex md2 justify-start align-center>
        <v-flex md4>显示</v-flex>
        <v-flex md4>
          <v-select :items="pageOptions" v-model="pagination.limit"></v-select>
        </v-flex>
        <v-flex md4>条/页</v-flex>
      </v-flex>
      <v-flex md2>共 {{ pagination.pageCount }} 条数据</v-flex>
      <v-flex md4>
        <v-pagination
          @input="onPageChange"
          :length="pagination.pageCount"
          circle
          total-visible="5"
          v-model="pagination.page"
        ></v-pagination>
      </v-flex>
    </v-flex>
  </v-layout>
</template>
    
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({})
export default class Pagination extends Vue {
  private pageOptions: any = [
    {
      text: 10,
      value: 10
    },
    {
      text: 15,
      value: 15
    },
    {
      text: 20,
      value: 20
    }
  ];

    private pagination: any = {
    pageCount: 20,
    page: 1,
    limit: 10,
    offset: 0,
  }

}
</script>

<style lang="less">
</style>
